<template>
    <div class="page_content">
        <div class="data-content">
            <div style="display: flex;justify-content:center;align-items: center;height: 200rem;" v-show="isLoading">
                <a-spin size="large" :spinning="isLoading"></a-spin>
            </div>
            <div class="w-fixed-center">
                <div v-if="apiData.id">
                    <video :id="`video_story_${apiData.id}`" controls="controls" preload="none"
                        :poster="imgDomainUrl + apiData.img" muted>
                        <source :src="apiData.video" type="video/mp4" />
                    </video>
                    <div class="add_date">发布日期：{{ apiData.add_date }}</div>
                    <div class="add_date">播放量：{{ apiData.play_times_sum }}</div>
                    <div class="title">{{ apiData.title }}</div>
                    <div class="desc" v-html="apiData.desc"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { message } from 'ant-design-vue';
import { ref, onMounted, inject } from 'vue';   //引入ref
import { getVideoDetail } from "@/api/web";   //引入api
import { useRoute, useRouter } from 'vue-router';
//设置导航选中状态
import { webNavSelected } from '@/store/webNavSelected.js';
webNavSelected.set('video');

const isLoading = ref(true);    // 控制loading

const { imgDomainUrl } = inject('imgDomainUrl');  // 依赖注入--文件、图片前的域名

const route = useRoute();
const router = useRouter();
// 获取 URL 中的查询参数（route.params获取restful参数、route.query获取?&a=b格式参数）
const id = route.params.id;
if (id == undefined || id == null || id == '') {
    router.go(-1);
}

// 接口获取到的数据
const apiData = ref({});

// 获取数据
const getData = () => {
    //根据需求可以通过data传入参数
    const searchData = { id: id }
    getVideoDetail(searchData).then((res) => {
        isLoading.value = false;
        if (res === false) return;

        apiData.value = res.data;
    }).catch((rej) => {
        isLoading.value = false;
        message.error('错误：' + rej);
    });
}

onMounted(() => {
    getData()
})
</script>

<style scoped>
.data-content {
    padding: 20rem 0;
}

video {
    width: 100%;
    max-width: 100%;
}

.add_date {
    font-size: 18rem;
    margin-bottom: 5rem;
}

.title {
    font-size: 16rem;
    margin-bottom: 5rem;
    color: #666;
}

.desc {
    font-size: 16rem;
    margin-bottom: 5rem;
    color: #666;
}
</style>
